<template>
  <main>
    <van-nav-bar
      title="盘库"
      class="page-nav-bar"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="container">
      <van-form @submit="onSubmit" ref="formRef">
        <van-cell-group inset>
          <van-field
            v-model="storagePlace"
            is-link
            readonly
            name="storagePlace"
            label="库区"
            placeholder="点击选择库区"
            @click="showPicker3 = true"
          />
          <van-popup v-model:show="showPicker3" position="bottom">
            <van-picker
              :columns="storagePlaceOptions"
              @confirm="onConfirm3"
              @cancel="showPicker3 = false"
            />
          </van-popup>
        </van-cell-group>
        <div class="btn-area">
          <div @click="onClickLeft">
            <img src="@/assets/image/btn_fanhui1.png" alt="" />
            <div>返回</div>
          </div>
          <div @click="confirmSelect">
            <img src="@/assets/image/btn_queren.png" alt="" />
            <div>确认</div>
          </div>
        </div>
      </van-form>
    </div>
  </main>
</template>

<script>
  import { ref, onMounted } from 'vue'
  import * as chukudanApi from '@/api/chukudan'
  import { useRouter } from 'vue-router'
  import { showToast, showLoadingToast, closeToast, showFailToast } from 'vant'

  let formRef = ''
  export default {
    mounted() {
      formRef = this.$refs['formRef']
    },

    setup() {
      const storagePlace = ref('')
      let storagePlaceObj = {}
      const showPicker3 = ref(false)
      const storagePlaceOptions = ref([])

      const router = useRouter()

      const onConfirm3 = ({ selectedOptions }) => {
        storagePlaceObj = selectedOptions[0]
        storagePlace.value = selectedOptions[0]?.text
        showPicker3.value = false
      }

      const onClickLeft = () => router.push({ name: 'home' })

      const confirmSelect = () => {
        formRef.submit()
      }

      const onSubmit = (values) => {
        if (!storagePlace.value) {
          showFailToast('请选择库区！')
          return
        }

        router.push({
          name: 'pankuResult',
          query: storagePlaceObj,
        })
      }

      onMounted(() => {
        chukudanApi.getWarehouse().then((res) => {
          if (res) {
            res.data.value.map((e) => {
              storagePlaceOptions.value.push({
                text: e.name,
                value: e.code,
              })
            })
          }
        })
      })

      return {
        storagePlace,
        storagePlaceOptions,
        showPicker3,
        onClickLeft,
        onConfirm3,
        confirmSelect,
        onSubmit,
      }
    },
  }
</script>

<style scoped>
  /** */

  .btn-area > div {
    font-size: 25px;
    width: 45%;
  }

  .btn-area img {
    width: 60px;
    margin-bottom: 10px;
  }

  .btn-area > div:nth-child(2) {
    background-color: var(--btn-color1);
  }
  .btn-area > div:nth-child(1) {
    background-color: var(--btn-color2);
  }

  /**vant form */

  ::v-deep(.van-form) {
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>
